<!--课程目录列表子项组件-->
<template>
  <view class="entire">
    <view class="picture">
      <image
        src="/static/images/icons/exam/icon_test.png"
        style="width: 80rpx; height: 65rpx"
      ></image>
    </view>
    <view class="info">
      <view class="top">
        <view class="left">
          {{ exam.examTitle }}
        </view>
        <view class="right">
          <image v-if="exam.isPass === true" src="/static/images/icons/completed.png" />
        </view>
      </view>
      <view style="color: #2a3f91; font-size: 24rpx; margin-top: 15rpx; margin-left: 20rpx">
        已测试{{ exam.testTimes }}次
      </view>
      <view class="bottom">
        <image
          src="/static/images/icons/exam/icon_time.png"
          style="width: 25rpx; height: 25rpx"
        ></image>
        <view style="color: grey; margin-left: 10rpx">测试时长:</view>
        <view style="color: #2a3f91">{{ exam.timeLength }}</view>
        <view style="color: grey">分钟</view>
        <image
          src="/static/images/icons/exam/icon_pen.png"
          style="width: 25rpx; height: 25rpx; margin-left: 20rpx"
        ></image>
        <view style="color: grey; margin-left: 10rpx">测试次数:</view>
        <view style="color: #2a3f91">{{ exam.allowTimes }}</view>
        <view style="color: grey">次</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ExamItem } from '@/service/courseWare/courseWare'

const props = defineProps<{
  exam: ExamItem
}>()
</script>

<style scoped lang="scss">
.entire {
  width: 700rpx;
  height: 160rpx;
  background-color: white;
  border-radius: 15rpx;
  margin-left: 25rpx;
  margin-top: 20rpx;
  letter-spacing: 0.5rpx;
  display: flex;
  position: relative;
  .picture {
    width: 160rpx;
    height: 160rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: rgba(201, 201, 201, 0.67);
  }
  .info {
    display: flex;
    width: 540rpx;
    height: 160rpx;
    flex-direction: column;
    justify-content: space-between;
    .top {
      margin-left: 20rpx;
      margin-top: 20rpx;
      display: flex;
      width: 500rpx;
      padding-bottom: 10rpx;
      border-style: solid;
      border-width: 0 0 1rpx 0;
      border-color: rgba(201, 201, 201, 0.67);
      .left {
        font-size: 24rpx;
        width: 500rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: bold;
      }
      .right {
        right: 20rpx;
        top: 20rpx;
        position: absolute;
        width: 80rpx;
        height: 80rpx;
      }
    }
    .bottom {
      display: flex;
      width: 500rpx;
      height: 40rpx;
      margin-left: 20rpx;
      margin-bottom: 20rpx;
      margin-top: 5rpx;
      align-items: center;
      font-size: 25rpx;
    }
  }
}
.entire {
  background-color: #ffffff;
}
.entire:active {
  background-color: #f5f5f7;
}
</style>
